<template>
  <div>
    <van-dialog
      v-model="show"
      title="标题"
      :show-cancel-button="false"
      :showConfirmButton="false"
      :closeOnClickOverlay="true"
    >
      <van-form @submit="onSubmit">
        <div style="display: flex">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <van-field
            v-model="tel"
            name="tel"
            type="tel"
            label="手机号"
            :rules="[{ pattern, message: '请输入正确手机号' }]"
          />
        </div>

        <van-field
          v-model="sms"
          name="yzm"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              @click="changeflag"
              :disabled="!flag"
              >{{ flag ? "发送验证码" : timer }}</van-button
            >
          </template>
        </van-field>
        <div style="margin: 16px">
        <!-- 在form的按钮上如果有native-type 代表这个按钮可以提交表单，也就是说可以获取表单的值 -->
          <van-button round block type="info" native-type="submit" :loading="loginflag" loading-text="加载中..."
            >登陆</van-button
          >
        </div>
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import axios from "axios"
import {debounce} from "lodash" // 1. npm i lodash  然后从lodash里引入防抖 
// methods 是一个对象，接收一个键值对 ，键是提交表单的方法名，值是 防抖函数
console.log(debounce);
export default {
  props: ["show"], // 接收的父组件的参数
  data() {
    return {
      // show:true
      flag: true, // 控制显示发送验证码和时间的显示
      tel: "",
      sms: "",
      yzm:"",
      loginflag:false,
      timer: 10,
      pattern: /^1[3-9]\d{9}$/,
      options: [
        {
          value: 86,
          label: "+86中国",
        },
        {
          value: 1,
          label: "+1美国",
        },
        {
          value: 852,
          label: "+852中国香港",
        },
      ],
      value: "",
    };
  },
  methods: {
    closefn() {
      this.$parent.show = false;
    },
    onSubmit: debounce (function onSubmit1(values) {
      console.log("submit", values);
      axios.get("/api/login",{
          params:values
      }).then(res=>{
          console.log(res.data);
          if (res.data.code === 1) {
            window.localStorage.setItem("token",res.data.token)
            this.loginflag = true
            setTimeout(()=>{
                this.$router.push("/home/index")
            },1000)
          }
      })
    },1000)
   ,
    changeflag() {
      // 点击按钮修改flag值
      this.flag = !this.flag;
      let mytimmer = setInterval(() => {
        this.timer--;
        if (this.timer <= 0) {
          this.timer = 10;
          this.flag = true;
        }
      }, 1000);
    },
  },
};
</script>

<style scoped>
.van-dialog {
  height: 60vh !important;
}
.van-field__label {
  width: 60px !important;
}
</style> 